<template>
  <el-form
    ref="form"
    :rules="rules"
    :inline="inline"
    @submit.native.prevent="submitHandler"
    :label-width="labelWidth"
    :model="formData"
    :size="size"
  >
    <el-form-item v-for='item in items' :label="item.label" :key='item.prop' :rules="item.rules || []">
      <!-- 输入框 -->
      <el-input v-if="item.type==='input'" v-model="formData[item.prop]" :maxlength="item.maxlength" :size="size" :placeholder="item.placeholder || '请输入'" :type="item.inputType" :clearable="item.clearable" ></el-input>
      <!-- 下拉框 -->
      <el-select v-if="item.type==='select'" v-model="formData[item.prop]" :size="size" @change="item.change(formData[item.prop])" :clearable="item.clearable" :multiple="item.multiple" :placeholder="item.placeholder || '请选择'">
          <el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value"></el-option>
      </el-select>
      <!-- 单选 -->
      <el-radio-group v-if="item.type==='radio'" v-model="formData[item.prop]">
          <el-radio v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ra.label}}</el-radio>
      </el-radio-group>
      <!-- 单选按钮 -->
      <el-radio-group v-if="item.type==='radio-button'" v-model="formData[item.prop]" @change="item.change && item.change(formData[item.prop])">
          <el-radio-button v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ra.label}}</el-radio-button>
      </el-radio-group>
      <!-- 复选框 -->
      <el-checkbox-group v-if="item.type==='checkbox'" v-model="formData[item.prop]" >
          <el-checkbox v-for="ch in item.checkboxs" :label="ch.value" :key="ch.value">{{ch.label}}</el-checkbox>
      </el-checkbox-group>
      <!-- 日期 -->
      <el-date-picker v-if="item.type==='datepicker'" v-model="formData[item.prop]" :type="item.type" ></el-date-picker>
      <!-- 时间 -->
      <el-time-select v-if="item.type==='timeselect'" v-model="formData[item.prop]" :type="item.type"></el-time-select>
      <!-- 日期时间 -->
      <el-date-picker v-if="item.type==='datetimepicker'" type='datetime' v-model="formData[item.prop]" :disabled="item.disable && item.disable(formData[item.prop])"></el-date-picker>
      <!-- 滑块 -->
      <el-slider v-if="item.type==='slider'" v-model="formData[item.prop]"></el-slider>
      <!-- 开关 -->
      <el-switch v-if="item.type==='switch'" v-model="formData[item.prop]" ></el-switch>
    </el-form-item>
    <el-form-item label="" v-if="showFooter">
      <el-button
        type="primary"
        :plain="true"
        :size="size"
        v-if="!hiddenCancelBtn"
        @click="cancelHandler"
        :loading="submitLoading">
        {{ cancelBtnText }}
      </el-button>
      <el-button
        type="primary"
        :size="size"
        @click="submitHandler"
        :loading="submitLoading">
        {{ submitBtnText }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { AppModule } from '@/store/modules/app'
import { ElForm } from 'element-ui/types/form'
import { ElTable } from 'element-ui/types/table'
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  name: 'StandardForm'
})
export default class extends Vue {
    @Prop({ default: true }) private showFooter?: boolean
    @Prop({ default: true }) private hiddenCancelBtn?: boolean
    @Prop({ default: false }) private inline?: boolean
    @Prop({ }) private labelWidth?: string
    @Prop({ }) private itemWidth?: number
    @Prop({ }) private handleSubmit?: Function
    @Prop({ }) private handleCancel?: Function
    @Prop({ default: '提交' }) private submitBtnText?: string
    @Prop({ default: '取消' }) private cancelBtnText?: string
    @Prop({ default: [] }) private forms!: Array<any>
    @Prop({ default: {} }) private rules?: object
    @Prop({ default: {} }) private formData!: Array<any>
    @Prop({ default: false }) private submitLoading?: boolean

    get size() {
      return AppModule.size
    }

    get items() {
      return this.forms.map((item) => ({
        ...item,
        type: item.type || 'input'
      }))
    }

    private cancelHandler() {
      if (this.handleCancel) this.handleCancel()
    }

    private submitHandler() {
      (this.$refs.form as ElForm).validate((isValid, invalidFields) => {
        if (isValid && this.handleSubmit) {
          this.handleSubmit()
        }
      })
    }
}
</script>
